import React from "react";
import { Link, Routes, Route, Outlet } from "react-router-dom";

const Hot = () => {
  return <div>这是热映页面</div>;
};
const Wait = () => {
  return <div>这是待映页面</div>;
};

const Home = () => {
  return (
    <>
      <div>这是首页页面</div>
      <ul>
        <li>
          <Link to="/home">热映</Link>
        </li>
        <li>
          <Link to="/home/wait">待映</Link>
        </li>
      </ul>

      <hr />

      <Outlet />
    </>
  );
};

const About = () => {
  return <div>这是关于页面</div>;
};

const App = () => {
  return (
    <>
      <h2>react-router-v6-嵌套</h2>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于页</Link>
        </li>
      </ul>

      <hr />

      <Routes>
        {/* 可以在Route组件的里面继续写Route组件，会在子组件的Outlet处渲染 */}
        {/* 如果下一级路由的path不是/开头的，那么会自动拼接到上一级的path */}
        {/* 如果下一级路由的地址和上一级一样，可以直接使用index */}
        <Route path="/home" element={<Home></Home>}>
          <Route index element={<Hot />}></Route>
          <Route path="wait" element={<Wait />}></Route>
        </Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </>
  );
};

export default App;
